<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>分割PDF</title>
    <link rel="stylesheet" href="{{ asset('layui/layui/css/layui.css') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script src="{{ asset('js/jquery.min.js') }}"></script>
    <script src="{{ asset('js/jquery.form.min.js') }}"></script>
    <script src="{{ asset('layui/layui/layui.js') }}"></script>
</head>
<body>

<div class="layui-container">
    <div class="layui-row" style="margin-top: 50px">
        <button class="layui-btn" id="test" style="display: none">测试</button>
        <div class="layui-col-md6" style="margin-top: 12px">
            <form class="layui-form" id="form">

                <div class="layui-collapse" lay-accordion style="margin-bottom: 15px;margin-left: 25px;width: 518px">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title" style="color: red;font-weight: bold">注意事项，点击查看</h2>
                        <div class="layui-colla-content">
                            <div class="layui-text">
                                <ul>
                                    <li>注意文件大小！PDF最大不超过 800M</li>
                                    <li>注意网络！上传时间最长不得超过5分钟</li>
                                    <li>注意页数！保证PDF里面的第一页是需要的第一页，如果开头有几页不需要的内容，将其删除！</li>
                                    <li>如果档案号名存在斜杠，斜杠会被转换为横杠</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">参建单位ID</label>
                    <div class="layui-input-inline">
                        <input type="text"  name="part_company_id" value="{{ $params['part_company_id'] }}" readonly="true" class="layui-input" id="part_company_id" >
                    </div>
                    <div class="layui-form-mid layui-word-aux"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">项目分类ID</label>
                    <div class="layui-input-inline">
                        <input type="text"  name="project_classify_id" value="{{ $params['project_classify_id'] }}" readonly="true" class="layui-input" id="project_classify_id" >
                    </div>
                    <div class="layui-form-mid layui-word-aux"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">档案号</label>
                    <div class="layui-input-block">
                        <input type="text" name="archives_no" value="{{ $params['archives_no'] }}"  readonly="true"  class="layui-input" id="archives_no" style="width: 435px">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">PDF文件</label>
                    <div class="layui-input-block">
                        <input name="pdf_path" class="layui-input" id="pdf_path" readonly="true"
                               style="width: 435px;margin-bottom: 2px;display: none">
                        <div class="layui-progress layui-progress-big" lay-showPercent="yes" style="margin-top:5px;margin-bottom: 5px;width: 435px">
                            <div class="layui-progress-bar layui-bg-green" id="uploadImg" lay-percent="0%"></div>
                        </div>
                        <button type="button" class="layui-btn" id="uploadBtn">
                            <i class="layui-icon">&#xe67c;</i>上传
                        </button>
                    </div>
                </div>
                <input type="hidden" value="" id="zip_url">
            </form>
            <div class="layui-form-item" style="margin-top: 30px">
                <div class="layui-input-block">
                    <button class="layui-btn" id="submitBtn" style="display:none; margin-top: 100px">提交检查</button>
                </div>
            </div>
        </div>
        <!--左侧表格  display: none -->
        <div class="layui-col-md5" style="display: none;margin-top: 7px;margin-left: 80px;" id="right-con">
            <div class="layui-word-aux" id="notice">该PDF即将分割如下，请核对是否正确</div>
            <table id="demo" lay-filter="test"></table>
            <button class="layui-btn" id="confirmBtn">确认无误 立即生成</button>
            <button class="layui-btn layui-btn-normal" id="downloadZip" style="display:none;margin-left: 50px">立即下载 Zip 文件</button>
        </div>

    </div>
</div>

<script>
    let user_id    = '{{$params['user_id']}}';
    let company_id = '{{$params['company_id']}}';
    <!--文件上传-->
    layui.use('upload', function () {
        var $ = layui.jquery;
        var upload = layui.upload;
        var element = layui.element;
        element.render();
        var uploadInst = upload.render({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            },
            elem: '#uploadBtn',
            url: "/upload_pdf",//上传接口
            size: 200 * 1024 * 1024,
            exts: 'pdf',
            //auto: false,
            done: function (res) {
                if (res.code == 200) {
                    $("#pdf_path").val(res.data);
                    $("#pdf_path").show();
                    $("#submitBtn").show();
                    layer.closeAll();
                    layer.msg('上传成功！');
                }
            },
            progress: function (n) {
                var percent = n + '%' //获取进度百分比
                $("#uploadImg").attr("lay-percent", percent);
                element.render(); //进度条
            }
        });
    });

    <!--检查数据-->
    $("#submitBtn").click(function () {
        layer.closeAll();
        layer.msg("正在检查数据，请稍后...",{
            icon:16,
            time:-1
        })
        $("#form").ajaxSubmit({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "post",
            url: '/check',
            success: function (res) {
                layer.closeAll();
                if (res.code == 200) {
                    layui.use('table', function() {
                        var table = layui.table;
                        table.render({
                            elem: '#demo',
                            height: '',
                            limit:200,
                            cols: [[ //表头
                                {field: 'serial_no', title: '#', width:130},
                                {field: 'page_scope', title: '页码范围', width:140},
                                {field: 'title', title: '生成的PDF标题', width:204}
                            ]],
                            data: res.data
                        });
                    });
                    $("#right-con").show();
                } else {
                    layer.alert(res.msg, {icon: 5});
                }
            },
            error: function (res) {
                layer.closeAll();
                layer.alert('PDF可能用了不支持的文件压缩技术，请尝试用WPS打开，然后另存为一个新的PDF文件', {icon: 5});
            }
        });
    });

    <!--立即生成-->
    $("#confirmBtn").click(function () {
        var archives_no = $("#archives_no").val();
        var pdf_path = $("#pdf_path").val();
        layer.closeAll();
        layer.msg("正在生成 Zip文件,请稍后...",{
            icon:16,
            time:-1
        })
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "post",
            url: '/cut_pdf_action',
            responseType: 'blob',
            data:{
                'user_id': user_id,
                'company_id': company_id,
                'archives_no': archives_no,
                'pdf_path': pdf_path,
            },
            success: function (res) {
                layer.closeAll()
                $("#zip_url").val(res.data);
                $("#downloadZip").show();
                layer.msg('成功生成！');
            }
        });
    });

    <!--下载 Zip-->
    $("#downloadZip").click(function () {
        window.location.href = $("#zip_url").val();
    });

</script>

</body>
</html>
